<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color-thief</title>
</head>

<body>
    <img src="./images/2024-05-27.png" />
    <script src="./js/color-thief.umd.js"></script>
    <script>

        const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
            const hex = x.toString(16)
            return hex.length === 1 ? '0' + hex : hex
        }).join('')

        const colorThief = new ColorThief();
        const img = document.querySelector('img');
        const body = document.querySelector('body');

        // Make sure image is finished loading
        console.log(img.complete)
        if (img.complete) {
            const color = colorThief.getColor(img);
            body.style.backgroundColor = rgbToHex(color[0], color[1], color[2])
        } else {
            image.addEventListener('load', function () {
                const color = colorThief.getColor(img);
                body.style.backgroundColor = rgbToHex(color[0], color[1], color[2])
            });
        }
    </script>
</body>

</html>